//财务管理-2差异明细
import '../Finance.css'
import http from '../../../utils/http';
import { useState , useRef , useEffect } from 'react';
import { NavLink } from 'react-router-dom'
import { IconExclamationCircle } from '@arco-design/web-react/icon'
import { Form , DatePicker , Select , Button , Table , Pagination , Input } from '@arco-design/web-react';
const { RangePicker } = DatePicker;

//下拉选项
const Option = Select.Option;
const option1 = ['支付宝', '微信', 'QQ', '银联'];
const option2 = ['消费', '退款', '商户AA'];
const option3 = ['支付宝单边', '商户单边', '金额不符'];
const option4 = ['待处理', '已处理'];

//表单
const columns = [
  {
    title: '交易完成时间',
    dataIndex: 'time',
    key:'time'
  },
  {
    title: '对账类型',
    dataIndex: 'type1',
    key:'type1'
  },
  {
    title: '交易类型',
    dataIndex: 'type2',
    key:'type2'
  },
  {
    title: '差错类型',
    dataIndex: 'type3',
    key:'type3'
  },
  {
    title: '支付订单号/商户订单号',
    key:'id1',
    render: (_,record) => (<span>{record.id1}<br/>{record.id2}</span>),
  },
  {
    title: (<span>支付订单金额<br/>商户订单金额</span>),
    key:'money1',
    render: (_,record) => (<span>{record.money1}<br/>{record.money2}</span>),
  },
  {
    title: '处理状态',
    key:'state',
    render: (_,record) => (<span>{record.state?'已处理':'未处理'}</span>),
  },
  {
    title: '操作',
    key: 'id1',
    render: (_, record) => {
      if(record.state){
        return <NavLink to={toValue('result',record.id1)}><Button type='text' status='success'>查看处理状态</Button></NavLink>
      }else {
        return <NavLink to={toValue('handle',record.id1)}><Button type='text' status='warning'>立即处理</Button></NavLink>
      }
    }

  }
];
//跳转传值
function toValue(v,i) {
  return '/home/finance/'+v+'?batchNumber='+i
}

// const allData = [
//   {
//     time: '2019-12-01',
//     type1: '支付宝',
//     type2: '消费',
//     type3:'支付宝单边',
//     id1: 'PAY2938475628374625',
//     id2: '-',
//     money1:35.00,
//     money2:0,
//     state:0
//   },
//   {
//     time: '2019-11-01',
//     type1: 'QQ',
//     type2: '商户AA',
//     type3:'支付宝单边',
//     id1: 'PAY3938475628374611',
//     id2: '159',
//     money1:35.00,
//     money2:0,
//     state:1
//   },
//   {
//     time: '2019-10-01',
//     type1: '支付宝',
//     type2: '消费',
//     type3:'支付宝单边',
//     id1: 'PAY2938475628374612',
//     id2: '-',
//     money1:35.00,
//     money2:0,
//     state:0
//   },
//   {
//     time: '2019-09-01',
//     type1: '支付宝',
//     type2: '商户AA',
//     type3:'支付宝单边',
//     id1: 'PAY3938475628374613',
//     id2: '-',
//     money1:35.00,
//     money2:0,
//     state:0
//   },
//   {
//     time: '2019-08-01',
//     type1: 'QQ',
//     type2: '商户AA',
//     type3:'支付宝单边',
//     id1: 'PAY4938475628374614',
//     id2: '-',
//     money1:35.00,
//     money2:0,
//     state:0
//   },
//   {
//     time: '2019-07-01',
//     type1: '微信',
//     type2: '消费',
//     type3:'支付宝单边',
//     id1: 'PAY2938475628374615',
//     id2: '-',
//     money1:35.00,
//     money2:0,
//     state:1
//   },
//   {
//     time: '2019-06-01',
//     type1: 'QQ',
//     type2: '消费',
//     type3:'支付宝单边',
//     id1: 'PAY2938475628374616',
//     id2: '-',
//     money1:35.00,
//     money2:0,
//     state:1
//   },
//   {
//     time: '2019-05-01',
//     type1: '银联',
//     type2: '商户AA',
//     type3:'支付宝单边',
//     id1: 'PAY2938475628374617',
//     id2: '-',
//     money1:35.00,
//     money2:0,
//     state:1
//   },
//   {
//     time: '2019-04-01',
//     type1: 'QQ',
//     type2: '退款',
//     type3:'支付宝单边',
//     id1: 'PAY2938475628374618',
//     id2: '-',
//     money1:35.00,
//     money2:0,
//     state:0
//   }
// ];

var allData=[]
var _allDate=allData
var pageArr=[5,10,20]
var nowPage=1
var sizePage=5
var selV={}
var randomNum=366

const Deta = () => {
  useEffect(()=>{
    console.log('useEfect触发');
    link()
  },[])
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const formRef = useRef();
  const link = () => {
    http({
      url: '/errorSelectAll',
      method: 'get'
    }).then((res) => {
      console.log(res.result.data);
      succLink(res.result.data)
    })
    // setData(_allDate.slice((nowPage-1)*sizePage,sizePage*nowPage))
  }
  const succLink=(v)=>{
    allData=time2(v)
    _allDate=allData
    setData(_allDate.slice((nowPage-1)*sizePage,sizePage*nowPage))
  }
  //修改页码触发
  function onPage(pageNumber, pageSize){
    nowPage=pageNumber
    sizePage=pageSize
    load()
  }
  //表达模拟加载
  function load(){
    setData(_allDate)
    setLoading(true);
    random()
    setTimeout(() => {
      setData(_allDate.slice((nowPage - 1) * sizePage, nowPage * sizePage));
      setLoading(false);
      nowPage=1
    }, 200);
  }
  //查询
  function query(){
    _allDate=allData
    if(selV.time){
      _allDate=_allDate.filter((v)=>{
        return v.time>=selV.time[0]&&v.time<=selV.time[1]
      })
    }
    if(selV.option1){
      _allDate=_allDate.filter((v)=>{
        return v.type1===selV.option1
      })
    } 
    if(selV.option2){
      _allDate=_allDate.filter((v)=>{
        return v.type2===selV.option2
      })
    }
    if(selV.option3){
      _allDate=_allDate.filter((v)=>{
        return v.type3===selV.option3
      })
    }
    if(selV.option4){
      _allDate=_allDate.filter((v)=>{
        if(selV.option1==='待处理'){
          return v.state===0
        }else{
          return v.state===1
        }
      })
    }
    if(selV.inp!==undefined){
      let inp=selV.inp.toUpperCase()
      _allDate=_allDate.filter((v)=>{
        return v.id1.indexOf(inp)>=0||v.id2.indexOf(inp)>=0
      })
    }
    onPage(1,sizePage)
  }
  //重置
  function reset(){
    _allDate=allData
    onPage(1,sizePage)
    formRef.current.resetFields();
  }
  //搜索框内改变值时触发
  const onValuesChange = (changeValue, values) => {
    selV=values
  };
  //时间转换
  function time2(v){
    for(let i=0;i<v.length;i++){
      v[i].transactionTime=v[i].transactionTime.slice(0,10)
    }
    return v
  }
  // 加载时间随机值800-300
  function random(){
    randomNum = parseInt(Math.random() * 500 + 300)
  }  


  return (
    <div className='bigBox'>
      <div className='title'>
        <div>
          <span>财务管理</span>
          <span>  /  </span>
          <span className='bold'>差异明细</span>
        </div>
        <h2>差异明细</h2>
      </div>
      <div className='content'>
        <div className='header_opt'>
          <Form ref={formRef} onValuesChange={onValuesChange}>
            <div> {/* 时间选择 */}
              <Form.Item label='交易日期：' field='time'>
                <RangePicker
                  mode='date'
                  style={{ marginBottom: 24 }}
                />
              </Form.Item>
            </div>
            <div> {/* 下拉选择1 */}
            <Form.Item label='交易类型：' field='option1'>
                <Select placeholder='请选择'>
                  {option1.map((option, index) => (
                    <Option key={option} value={option}>
                      {option}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
            <div> {/* 下拉选择2 */}
              <Form.Item label='对账类型：' field='option2'>
                <Select placeholder='请选择'>
                  {option2.map((option, index) => (
                    <Option key={option} value={option}>
                      {option}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
            <div> {/* 输入框 */}
              <Form.Item label='订单编号：' field='inp'>
                <Input className='whiteBg' placeholder='请输入...' />
              </Form.Item>
            </div>           
            <div> {/* 下拉选择3 */}
              <Form.Item label='差错类型：' field='option3'>
                <Select placeholder='请选择'>
                  {option3.map((option, index) => (
                    <Option key={option} value={option}>
                      {option}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
            <div> {/* 下拉选择4 */}
              <Form.Item label='处理结果：' field='option4'>
                <Select placeholder='请选择'>
                  {option4.map((option, index) => (
                    <Option key={option} value={option}>
                      {option}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
          </Form>
        </div>
        <div className='header_btn'>
          <Button type='primary' onClick={query}>查询</Button>
          <Button type='secondary' onClick={reset}>重置</Button>
        </div>
        <div className='selectItem'>
          <p><span><IconExclamationCircle /></span>已选择<span>{_allDate.length}</span>项   本次查询耗时：{randomNum} 毫秒   <span>清空</span></p>
        </div>
        <div className='table'>
          <Table 
            columns={columns} 
            data={data} 
            loading={loading} 
            pagination={false}  
            rowKey='id1'
            rowSelection={{
              type: 'checkbox',
              onChange: (selectedRowKeys, selectedRows) => {
                console.log(selectedRowKeys, selectedRows);
              }
            }}
          />
          <Pagination
            showTotal
            total={_allDate.length}
            showJumper
            sizeCanChange
            pageSize={sizePage}
            sizeOptions={pageArr}
            onChange={onPage}
            style={{ width: 800, marginBottom: 20 }}
          />
        </div>
      </div>
    </div>
  )
}

export default Deta